<template>
  <common-card title="累计用户数" value="1,002,000">
    <template>
      <div id="total-user-charts" :style="{ height: '100%', width: '100%' }" />
    </template>
    <template v-slot:footer>
      <div class="compare">
        <span>日同比</span>
        <span class="emphasize">8.00%</span>
        <div class="increase" />
        <span style="margin-left:10px">月同比</span>
        <span class="emphasize">1.00%</span>
        <div class="decrease" />
      </div>
    </template>
  </common-card>
</template>
<script>
import CommonCardMixin from "@/mixins/commonCardMixin";

export default {
  mixins: [CommonCardMixin],
  mounted() {
    const chartDom = document.getElementById("total-user-charts");
    const chart = this.$echarts.init(chartDom);
    chart.setOption({
      grid: { top: 0, bottom: 0, left: 0, right: 0 },
      xAxis: { type: "value", show: false },
      yAxis: { type: "category", show: false },
      series: [
        {
          type: "bar",
          data: [150],
          barWidth: 10,
          itemStyle: {
            color: "#45c946" // 定制颜色
          },
          stack: "总量" //通过stack属性，两个bar 合并了
        },
        {
          type: "bar",
          data: [200],
          barWidth: 10,
          itemStyle: {
            color: "#eee"
          },
          stack: "总量"
        },
        {
          type: "custom", // 自定义序列
          data: [150],
          stack: "总量",
          renderItem: function(params, api) {
            // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
            var categoryIndex = api.value(0);
            // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
            var startPoint = api.coord([categoryIndex, 0]);
            console.log(startPoint);
            return {
              type: "path", // 点绘制线
              position: startPoint, // 位置
              shape: {
                d:
                  "M525.873548 133.450323l-383.174193 761.723871 763.045161 1.981935L525.873548 133.450323z",
                x: -5,
                y: 5,
                width: 10,
                height: 10,
                layout:"cover"
              },
              style: { fill: "#45c946" }
            };
          }
        },
        {
          type: "custom", // 自定义序列
          data: [150],
          stack: "总量",
          renderItem: function(params, api) {
            // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
            var categoryIndex = api.value(0);
            // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
            var startPoint = api.coord([categoryIndex, 0]);
            console.log(startPoint);
            return {
              type: "path", // 点绘制线
              position: startPoint, // 位置
              shape: {
                d:
                  "M512.2 881l384-665H128.3z",
                x: -5,
                y: -20,
                width: 10,
                height: 10,
                layout:"cover"
              },
              style: { fill: "#45c946" }
            };
          }
        },
      ]
    });
  }
};
</script>

<style lang="scss" scoped>
.compare {
  display: flex;
  align-items: center;
  margin-top: 3px;
  font-size: 12px;
}
</style>
